<template>
  <!-- 库位选择 -->
  <div>
    <FilterTable
      ref="table"
      height="auto"
      maxHeight="300"
      selectionType="single"
      :columns="columns"
      columnsRef="partPartInventoryPartInventoryComponentsPositionSelect"
      :isMemoryPagination="true"
      :dataSource="tableData"
      :onRowSelectChange="param => (this.selectedTableData = param)"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { notifyAction } from '@/utils';

export default {
  props: {
    positionList: Array,
    editRow: Object
  },
  data() {
    return {
      columns: this.createTableColumns(),
      tableData: [],
      selectedTableData: [] // 选中的数据
    };
  },
  created() {
    if (this.positionList.length) {
      this.tableData = this.positionList.map(item => ({ code: item }));
    }
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '库位代码',
          dataIndex: 'code',
          filter: true,
          filterType: 'input'
        }
      ];
    },
    handleConfirm() {
      if (this.selectedTableData.length) {
        this.$emit('onConfirm', {
          code: this.selectedTableData[0].code,
          oldCode: this.editRow.STORAGE_POSITION_CODE,
          srotage: this.editRow.STORAGE_CODE,
          index: this.editRow.$index || this.editRow.index
        });
        this.handleCancle();
      } else {
        notifyAction('请选择库位', 'warning');
      }
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
